<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>title</title>
  <!--<link rel="stylesheet" type="text/css" href="../css/api.css"/>-->
  <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  <!--<link rel="stylesheet" type="text/css" href="../css/chat.css" />-->
  <style>
    body {
    }
  </style>
</head>
<body>
<div id="video">
  <header class="aui-bar aui-bar-nav" id="header">
    <div class="aui-pull-left">
      <i class="aui-iconfont aui-icon-left" onclick="closeWin();"></i>
    </div>
    <div class="aui-title">
      视频播放
    </div>
    <div class="aui-pull-right">
      <a class="aui-btn aui-iconfont aui-icon-refresh" href=""></a>
    </div>
  </header>
  <section ref="vt" class="aui-content aui-refresh-content aui-padded-t-15" style="height: 298">
    <!-- 用户信息 -->
    <div  class="aui-content aui-margin-b-15">
      <ul class="aui-list aui-media-list">
        <li class="aui-list-item aui-list-item-middle">
          <div class="aui-media-list-item-inner">
            <div class="aui-list-item-inner aui-list-item-arrow">
              <div class="aui-list-item-text">
                <div class="aui-list-item-title aui-font-size-14">
                  正在播放
                </div>
                <div class="aui-list-item-title aui-font-size-14" id="videoname">
                  {{video.name}}
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>
  <section class="aui-chat" v-if="isLive">
    <div class="body-wrapper" v-for="msgObj in CHAT.msgArr">
      <div class="aui-chat-header" v-if="msgObj.cmd!='EVENT_MESSAGE'">
        <div class="sys-msg">
          {{msgObj.msg}} {{gettime(msgObj.timestamp)}}
        </div>
      </div>
      <div v-if="msgObj.cmd==='EVENT_MESSAGE'">
        <div  class="aui-chat-item aui-chat-left" v-if="msgObj.userid!=CHAT.userid" >
          <div class="aui-chat-media">
            {{msgObj.username.slice(0,1)}}
          </div>
          <div class="aui-chat-inner">
            <div class="aui-chat-name">
              {{msgObj.username}} <span class="aui-label aui-label-warning"> {{gettime(msgObj.timestamp)}}</span>
            </div>
            <div class="aui-chat-content">
              <div class="aui-chat-arrow"></div>
              {{msgObj.msg}}
            </div>
          </div>
        </div>
        <div class="aui-chat-item aui-chat-right"  v-if="msgObj.userid==CHAT.userid">
          <div class="aui-chat-media">
            我
          </div>
          <div class="aui-chat-inner">
            <div class="aui-chat-content">
              <div class="aui-chat-arrow"></div>
              {{msgObj.msg}}
            </div>
          </div>
        </div>
      </div>
      <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()">
          <i class="aui-iconfont aui-icon-search"></i>
          <form action="javascript:search();">
            <input type="search" placeholder="请输入搜索内容" id="search-input">
          </form>
        </div>
        <div class="aui-searchbar-cancel" tapmod>
          取消
        </div>
      </div>
      <!--<div class="foot-wrapper">
                <input class="chat-input" type="text" name="" @keyup.enter="send(msg)" v-model="msg" placeholder="输入消息">
                <span class="chat-sub" :class="{'primary':!!msg}" @click="send(msg)">发送</span>
                </div>-->
    </div>
  </section>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/crypto-js.js"></script>
<script type="text/javascript" src="../script/app.js"></script>
<script type="text/javascript" src="../script/wsclient.js"></script>
<script type="text/javascript">
  var playModule;
  var winw;
  var headerH, vu, serverurl;
  var vm = new Vue({
    el : '#video',
    data : {
      roomid : '',
      video : {},
      isLive : false,
      CHAT : CHAT,
      msg : '',
      height : 0
    },
    watch : {
      height : function() {
        console.log(this.height)
        //					this.$refs['vt'].style.height = this.height;
      }
    },
    mounted : function() {
      console.log(this.height)
      //				this.$refs['vt'].style.height = this.height;
      this.$el.scrollIntoView()
    },
    methods : {
      send : function(msg) {
        CHAT.submit(msg)
        this.msg = ''
      },
      gettime : function(data) {
        return new Date(parseInt(data) * 1000).toLocaleString().substr(0, 17)
      }
    }
  });
  apiready = function() {
    //不支持沉浸式效果
    api.parseTapmode();
    var newHeight;
    winw = api.winWidth;
    headerH = $api.offset(header).h;
    var frameH = api.winHeight - headerH;
    vu = api.pageParam.li;
    //			var h1 = 250+ headerH
    vm.height = 250 + headerH
    console.log(headerH)
    //			console.log( h1)
    console.log(vm.height)
    vm.video = vu
    vm.roomid = vu.name
    vm.isLive = api.pageParam.isLive
    serverurl = $api.getStorage('serverurl');
    //			console.log(serverurl)
    $api.byId('videoname').innerHTML = vu.name;
    vidWatch(vu);
    playModule = api.require('playModule');
    playModule.init({
      //  ttf: "widget://res/UKIJTor.ttf",
      buffering : "加载中",
      fullBtnPlan : 1
    });
    if (api.systemType == 'ios') {//如果是IOS，则加一点高度，否则出问题
      newHeight += 60;
    };
    play(vu.src);
    /** 监听Android返回键 */
    api.addEventListener({
      name : 'playVideo'
    }, function(ret, err) {
      if (ret) {
        play(ret.url)
      } else {
        closeWin()
      }
    });
    /** 监听Android返回键 */
    api.addEventListener({
      name : 'keyback'
    }, function(ret, err) {
      playModule.isFullScreen(function(ret, err) {
        if (ret.status) {
          playModule.unfull(function(ret, err) {
          });
        } else {
          closeWin();
        };
      });
    });
  };
  function play(videoUrl) {
    playModule.play({
      pageType : 'Window',
      rect : {
        x : 0,
        y : headerH,
        w : winw,
        h : 250
      },
      fixedOn : api.frameName,
      title : 'test',
      url : videoUrl,
      defaultBtn : true,
      enableFull : false,
      isTopView : false
    }, function(ret, err) {
    });
  };
  /** 关闭窗体 */
  function closeWin() {
    var wtime = 0
    playModule.getCurrentPosition(function(ret, err) {
      if (ret) {
        var wtime = ret.currentPosition
        //					console.log(wtime);
        var stime = wtime / 1000
        //					console.log(stime);
        //					console.log(vu.src);
        vidPost(vu, stime);
        api.closeWin({});
      } else {
        api.closeWin({});
      }
    });
  }

  /** 点击视频信息修改 */
  function vidWatch(vd) {
    url = 'video/VideoWatch'
    data = vd
    ajx(url, 'post', data, function(ret, err) {
      if (ret) {
      } else {
      }
    });
  }

  /** 观看时长 */
  function vidPost(vd, watchTime) {
    aurl = 'watchhistory'
    data = vd
    data['times'] = watchTime
    //			console.log(JSON.stringify(data))
    ajx(aurl, 'post', data, function(ret, err) {
      if (ret) {
        //					console.log(JSON.stringify(ret))
        //					callback(ret);
      } else {
        //					console.log(JSON.stringify(err))
      }
    });
  }
</script>
</html>
